

  <div class="layui-card">
  <div class="layui-card-header">
        <h2 class="header-title">采购订单管理</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!home_console">首页</a>
          <a><cite>采购订单管理</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
    <div class="layui-tab layui-tab-brief">
      <ul class="layui-tab-title" style="position:static !important;">
        <li class="layui-this">全部消息
        <% if(total > 0) { %><span class="layui-badge" style="left:0;margin-left:5px;">${total}</span></li><% } %>
        </li>
        <li>订单<% if(num12 > 0) { %><span class="layui-badge" style="left:0;margin-left:5px;">${num12}</span></li><% } %></li>
        <li>预警<% if(num3 > 0) { %><span class="layui-badge" style="left:0;margin-left:5px;">${num3}</span></li><% } %></li>
      </ul>
      <div class="layui-tab-content" style="padding: 0;">
      
        <div class="layui-tab-item layui-show" style="position:static !important;">
          <div class="LAY-app-message-btns" style="margin-bottom: 10px;">
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="all" data-events="del">删除</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="all" data-events="ready">标记已读</button>
            <!-- <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="all" data-events="readyAll">全部已读</button> -->
          </div>
          
          <table id="LAY-app-message-all" lay-filter="LAY-app-message-all"></table>
        </div>
        <div class="layui-tab-item" style="position:static !important;">
        
          <div class="LAY-app-message-btns" style="margin-bottom: 10px;">
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="notice" data-events="del">删除</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="notice" data-events="ready">标记已读</button>
            <!-- <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="notice" data-events="readyAll">全部已读</button> -->
          </div>
          
          <table id="LAY-app-message-notice" lay-filter="LAY-app-message-notice"></table>
        </div>
        <div class="layui-tab-item" style="position:static !important;">
        
          <div class="LAY-app-message-btns" style="margin-bottom: 10px;">
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="direct" data-events="del">删除</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="direct" data-events="ready">标记已读</button>
            <!-- <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="direct" data-events="readyAll">全部已读</button> -->
          </div>
          
          <table id="LAY-app-message-direct" lay-filter="LAY-app-message-direct"></table>
        </div>
      </div>
    </div>
    </div>
  </div>

<script>
layui.use(['admin', 'table', 'util'], function(){
  var $ = layui.$
  ,admin = layui.admin
  ,table = layui.table
  ,element = layui.element;

  
  var DISABLED = 'layui-btn-disabled'
  
  //区分各选项卡中的表格
  ,tabs = {
    all: {
      text: '全部消息'
      ,id: 'LAY-app-message-all'
    }
    ,notice: {
      text: '订单'
      ,id: 'LAY-app-message-notice'
    }
    ,direct: {
      text: '预警'
      ,id: 'LAY-app-message-direct'
    }
  };
  
  //标题内容模板
  var tplTitle = function(d){
	  var tem = '<div class="detailPage"  data-id=" '+d.id+'">'+ d.title;
	  if(d.states == 0){
		  tem = tem +'<span style="margin-left:15px;" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger">未读</span>';
	  }else{
		  tem = tem +'<span style="margin-left:15px;" class="layui-btn layui-btn-xs layui-btn-radius l layui-btn-disabled">已读</span>';
	  }
		  
    return tem;
  };
  
  //全部消息
  table.render({
    elem: '#LAY-app-message-all'
    ,url: '/system/message/list'
    ,where:{type:1}
    ,page: true
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'title', title: '标题内容', minWidth: 300, templet: tplTitle}
      ,{field: 'time', title: '时间', width: 170, templet: '<div>{{ layui.util.timeAgo(d.createTime) }}</div>'}
    ]]
    ,skin: 'line'
  });
  //订单消息
  table.render({
    elem: '#LAY-app-message-notice'
    ,url: '/system/message/list'
    ,where:{type:2}
    ,page: true
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'title', title: '标题内容', minWidth: 300, templet: tplTitle}
      ,{field: 'time', title: '时间', width: 170, templet: '<div>{{ layui.util.timeAgo(d.createTime) }}</div>'}
    ]]
    ,skin: 'line'
  });
  
  //预警
  table.render({
    elem: '#LAY-app-message-direct'
    ,url: '/system/message/list'
    ,where:{type:3}
    ,page: true
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'title', title: '标题内容', minWidth: 300, templet: tplTitle}
      ,{field: 'time', title: '时间', width: 170, templet: '<div>{{ layui.util.timeAgo(d.createTime) }}</div>'}
    ]]
    ,skin: 'line'
  });
  
  //事件处理
  var events = {
    del: function(othis, type){
      var thisTabs = tabs[type]
      ,checkStatus = table.checkStatus(thisTabs.id)
      ,data = checkStatus.data; //获得选中的数据
      if(data.length === 0) return layer.msg('未选中行');
      var list = [];
      for(var item in data){
    	  list[item]=data[item].id;
      }
      layer.load(2);

      layer.confirm('确定删除选中的数据吗？', function(){
          admin.req("system/message/del", list, function(data) {
  			layer.closeAll('loading');
  			if (data.code == 1) {
  				layer.msg(data.msg, {
  					  icon: 1,
  					  time: 1000
  					}, function(){
  						location.reload();
  						return;
  					})
  			}
  		}, "post");
      });
    }
    ,ready: function(othis, type){
      var thisTabs = tabs[type]
      ,checkStatus = table.checkStatus(thisTabs.id)
      ,data = checkStatus.data; //获得选中的数据
      if(data.length === 0) return layer.msg('未选中行');
      var list = [];
      for(var item in data){
    	  list[item]=data[item].id;
      }
      layer.load(2);
      admin.req("system/message/changeStates", list, function(data) {
			layer.closeAll('loading');
			if (data.code == 1) {
				layer.msg(data.msg, {
					  icon: 1,
					  time: 1000
					}, function(){
						location.reload();
						return;
					})
			}
		}, "post");
      location.reload(); //刷新表格
    }
  };
  
  //绑定事件
  $(document).on('click', '.detailPage', function(data) {
	    var othis = $(this)
	    ,id = othis.data('id')
	    ,message = othis.data('message'),
	    title = othis.data('title');
	    
	    admin.popupCenter({
        	area: '50%',
        	offset: '10%',
            title:"消息详情",
            type:"post",
            path: "system/message/detail?id="+id,
            btn: ['关闭'], //可以无限个按钮
            yes: function(index, layero){
            	location.reload();
              },
            finish: function () {
            	location.reload();
            }
        });
	  });
  
  
  $('.LAY-app-message-btns .layui-btn').on('click', function(){
    var othis = $(this)
    ,thisEvent = othis.data('events')
    ,type = othis.data('type');
    events[thisEvent] && events[thisEvent].call(this, othis, type);
  });
  

  
});

</script>